<template>
    <div>
        <Title :title="title"></Title>
        <!-- 图表容器 -->
        <div ref="humidityChart" style="height: 150px; margin-top: 10px;"></div>
    </div>
</template>
<script>
// 引入折线图构造函数
import { Line } from '@antv/g2plot';
// 引入工具函数
import { get } from '@/utils/request';
// 引入momentjs处理时间
import moment from 'moment';
// 引入标题组件
import Title from './Title.vue';

export default {
    components: {
        Title
    },
    data() {
        return {
            title: '实时湿度监测',
            // 图表实例
            lineChart: null,
            // 定时器
            timer: null,
            // 湿度数据（包含两条线的数据）
            humidityData: [],
            // 请求参数
            params: {
                page: 1,
                pageSize: 100
            }
        }
    },
    methods: {
        // 初始化双折线图
        initLineChart() {
            // 如果已有图表实例，先销毁
            if (this.lineChart) {
                this.lineChart.destroy();
            }
            
            // 创建新的折线图实例
            this.lineChart = new Line(this.$refs.humidityChart, {
                data: this.humidityData,
                xField: 'time',
                // 配置两条线的数据字段和样式
                seriesField: 'type',
                yField: 'value',
                xAxis: {
                    label: {
                        rotate: -45,
                        style: {
                            fill: "white",
                            fontSize: 12
                        }
                    }
                },
                yAxis: {
                    label: {
                        style: {
                            fill: "white",
                            fontSize: 12
                        }
                    },
                    title: {
                        text: '湿度(%)',
                        style: {
                            fill: "white"
                        }
                    },
                    min: 30,  // 湿度通常不会低于30%
                    max: 90   // 湿度通常不会高于90%
                },
                label: {
                    style: {
                        fill: 'white',
                        fontSize: 12
                    }
                },
                // 配置两条线的样式
                lineStyle: ({ type }) => {
                    if (type === '实际湿度') {
                        return {
                            stroke: '#22c55e',
                            lineWidth: 2
                        };
                    }
                    return {
                        stroke: '#06b6d4',
                        lineWidth: 2,
                        lineDash: [5, 2]  // 体感湿度使用虚线
                    };
                },
                // 配置两个数据系列的点样式
                point: {
                    size: 5,
                    shape: 'circle',
                    style: ({ type }) => {
                        if (type === '实际湿度') {
                            return {
                                fill: 'lightgreen',
                                stroke: '#22c55e',
                                lineWidth: 2,
                            };
                        }
                        return {
                            fill: 'lightblue',
                            stroke: '#06b6d4',
                            lineWidth: 2,
                        };
                    },
                },
                smooth: true,
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 1000,
                    },
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize: 14
                        }
                    }
                },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                        },
                    },
                },
                interactions: [{ type: 'marker-active' }],
                // 图例配置
                legend: {
                    position: 'top',
                    itemName: {
                        style: {
                            fill: 'white',
                            fontSize: 12
                        }
                    }
                }
            });
            
            // 渲染图表
            this.lineChart.render();
        },
        
        // 获取湿度数据
        async fetchHumidityData() {
            try {
                // 实际项目中使用接口获取数据
                // const res = await get('/dashboard/pageQueryTodayHumidityData', this.params);
                
                // 模拟接口数据
                const mockData = this.generateMockData();
                this.processData(mockData);
            } catch (error) {
                console.error('获取湿度数据失败:', error);
            }
        },
        
        // 生成模拟数据 - 包含实际湿度和体感湿度
        generateMockData() {
            const data = [];
            const now = new Date();
            
            // 生成最近12个时间点的数据
            for (let i = 11; i >= 0; i--) {
                const time = new Date(now.getTime() - i * 5 * 60 * 1000); // 每5分钟一个数据点
                const baseHumidity = 40 + Math.random() * 40; // 40-80%之间的随机湿度
                
                // 体感湿度通常与实际湿度有差异，这里模拟为±5%
                const feelHumidity = baseHumidity + (Math.random() * 10 - 5);
                
                // 添加实际湿度数据
                data.push({
                    insert_time: time,
                    type: '实际湿度',
                    value: parseFloat(baseHumidity.toFixed(1))
                });
                
                // 添加体感湿度数据
                data.push({
                    insert_time: time,
                    type: '体感湿度',
                    value: parseFloat(feelHumidity.toFixed(1))
                });
            }
            
            return { data: { list: data } };
        },
        
        // 处理数据
        processData(res) {
            let temp = [];
            
            res.data.list.forEach(item => {
                // 格式化时间
                const time = moment(item.insert_time).format("HH:mm");
                temp.push({
                    time: time,
                    type: item.type,
                    value: item.value
                });
            });
            
            this.humidityData = temp;
            // 更新图表数据
            this.updateChartData();
        },
        
        // 更新图表数据
        updateChartData() {
            if (this.lineChart) {
                this.lineChart.changeData(this.humidityData);
            } else {
                this.initLineChart();
            }
        }
    },
    async mounted() {
        // 初始加载数据
        await this.fetchHumidityData();
        this.initLineChart();
        
        // 设置定时器，每5秒更新一次数据
        this.timer = setInterval(() => {
            this.fetchHumidityData();
        }, 5000);
    },
    beforeDestroy() {
        // 清除定时器
        if (this.timer) {
            clearInterval(this.timer);
        }
        
        // 销毁图表实例
        if (this.lineChart) {
            this.lineChart.destroy();
        }
    }
}
</script>
<style lang="less" scoped>
// 组件样式
</style>
    